<template>
  <div class="clipbord__item">
    <div class="item__header fs-14 fs-b">
      <span>
        <svg-icon icon-class="clipbord-select" class="fs-16"></svg-icon>
        选择的文本
      </span>
      <svg-icon
        icon-class="close"
        class="close-btn hover-svg fs-16"
        @click="handleRemove"
      ></svg-icon>
    </div>
    <div class="item__body">
      <span v-if="item.target">{{ item.target.content }}</span>
    </div>
    <div class="item__footer">
      <div class="menu__item" v-for="menu in menus" :key="menu.title">
        <el-button type="default" @click="handleMenuClick(menu)">{{ menu.title }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
// import { useUserStore } from '@/stores/user'
// const user = useUserStore()
// import { removeClipbordTipsNode, sendMessage } from '@/utils/chat-message'
export default {
  name: '',
  components: {
  },
  props: {
    item: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    menus () { return this.userInfo.promptMenus.filter((v) => v.title !== '百度搜索') }
  },
  methods: {
    handleMenuClick (menu) {
      // sendMessage(this.item.target?.content, menu)
    },
    handleRemove () {
      // removeClipbordTipsNode(true)
    }
  }
}
</script>

<style lang="scss" scoped>
.clipbord__item {
  margin-top: 10px;
  width: 100%;
  border: 1px solid $border-color-primary;
  box-shadow: 0px 0px 10px 0px #00000026;
  border-radius: 10px;
  padding: 20px 24px;
  box-sizing: border-box;
  background: $color-white;
}
.item__header {
  margin-bottom: 10px;
  position: relative;
  display: flex;
  justify-content: space-between;
}
.item__body {
  line-height: 1.8;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}
.item__footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
  .el-button {
    width: 100%;
  }
}
</style>
